<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		#flex-iframe {
			width: 1200px;
			height: 500px;
		}

		h3 {
			text-align: center;
		}

		ul {
			display: flex;
		}

		li {
			padding: 4px 10px;
			list-style: none;
			cursor: pointer;
		}

		li:hover {
			background-color: rgb(154, 208, 255);
		}
	</style>
</head>

<body>
	<h3>flex布局</h3>
	<ul>
		<li onclick="handleClick('flex-direction')"><a href="#">flex-direction</a></li>
		<li onclick="handleClick('flex-wrap')"><a href="#">flex-wrap</a></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<iframe id="flex-iframe" src="./flex-direction.html" frameborder="0"></iframe>
	<script>
		const iframe = document.getElementById('flex-iframe')
		const li = document.getElementsByTagName('li')
		const list = Array.from(li)
		list.forEach(item => {
			item.onclick = function () {
				console.log(this.in)
			}
			console.log(item)
		})
		function handleClick(str) {
			iframe.src = `./${str}.html`
		}
	</script>
</body>

</html>